<template>
	<view class="itemWrap" @tap="click()">
		<view class="itemTopWrap">
			<view class="">
				<image class="userImg" :src="data.httpUrl+'/app/file/viewFile?fileId='+props.item?.avatarId" mode=""></image>
			</view>
			<view class="">
				<view class="">
					<text>{{props.item?.userName}}</text>
				</view>
				<view class="zhiWrap">
					<view class="pooWrap">
						<image class="bing" src="../../../../static/img/homeServer/zizhi.png" mode=""></image>
						<text style="color: #6B64D3;" class="poo">{{props.item?.authenticationFlag === 'Y' ? '已认证' : '未认证'}}</text>
					</view>
					<view class="pooWrap">
						<image class="bing" src="../../../../static/img/homeServer/xinyongfen.png" mode=""></image>
						<text style="color: #51B7FF;" class="poo">{{props.item?.credit}}</text>
					</view>
					<view class="pooWrap">
						<image class="bing" src="../../../../static/img/homeServer/baozhengjin.png" mode=""></image>
						<text style="color: #FFD863;" class="poo">{{props.item?.bondBalance}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="itemCenter">
			<text class="gooName">{{props.item?.publishName}}</text>
			<text class="gooPrice">¥{{props.item?.salaryMin}}-{{props.item?.salaryMax}}</text>
		</view>
		
		<view class="itemBottom">
			<view class="gooWrap" :style="{'background': props.item?.workAddressType === 'OFFLINE' ? '#152252': '#CC9968'}">
				<text :style="{'color': '#FFEDCA'}">{{props.item?.workAddressType === 'OFFLINE' ? '线下' : '线上'}}</text>
			</view>
			<view class="gooWrap" v-if="props.item?.workDays">
				<text>{{props.item?.workDays}}天</text>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import NavBar from '@/components/navBar.vue';
	
	const data = reactive<any>({
			httpUrl: getApp().globalData.baseUrl,
		})
		
	const props = defineProps({
		item:{
			type:Object
		}
	})
	
	const emit = defineEmits(['itemClick'])
	
	
	const click = () =>{
		 emit('itemClick', props.item)
	}


</script>

<style lang="scss" scoped>
	.itemWrap{
		background-color: #fff;
		padding: 24rpx;
		margin: 24rpx;
		border-radius: 24rpx;
		
		.itemTopWrap{
			display: flex;
			align-items: center;
		}
		
		.zhiWrap{
			display: flex;
			margin-top: 8rpx;
			
			.bing{
				width: 160rpx;
				height: 34rpx;
				margin-right: 12rpx;
			}
		}
		
		.userImg{
			width: 64rpx;
			height: 64rpx;
			border-radius: 64rpx;
			margin-right: 16rpx;
		}
	}
	
	
	.itemCenter{
		display: flex;
		justify-content: space-between;
		padding: 24rpx  0 16rpx 0;
		
		.gooName{
			font-size: 36rpx;
			color:#262626;
			font-weight: bold;
		}
		
		.gooPrice{
			font-size: 32rpx;
			color: #6B64D3;
			font-weight: bold;
		}
	}
	
	.itemBottom{
		display: flex;
	}
	
	.gooWrap{
		background-color: #E4E2FC;
		border-radius: 8rpx;
		padding: 6rpx 24rpx;
		margin-right: 12rpx;
		
		text{
			font-size: 24rpx;
			color: #6B64D3;
		}
	}
	
	.pooWrap{
		position: relative;
	}
	
	.poo{
		position: absolute;
		right: 32rpx;
		top: 4rpx;
		font-size: 20rpx;
	}
</style>